<template>
    <div>
      <Header></Header>
      <search-bar></search-bar>
      <el-divider></el-divider>
      <Banner  @choose='choose' @goods='goods'></Banner>
      <Recommend :choosse=this.choosse :product=this.product :totalnum=this.totalnum  @pagesize='size'></Recommend>
      <el-divider></el-divider>
      <Footer></Footer>
    </div>




</template>

<script>
import Header from '@/components/Index/Header'
import SearchBar from '@/components/Index/SearchBar'
import Banner from '@/components/Index/Banner'
import Recommend from '@/components/Index/Recommend'
import Footer from '@/components/Index/Footer'
import http from '@/core/HttpRequest.js'
export default {
  data: () => ({
      product:[],
      pagesize:10,
      totalnum:0,
      choosse:'',
  }),

  components: {
    Header,
    SearchBar,
    Banner,
    Recommend,
    Footer
  },
  methods:{
    goods(categoryId){
       http.post('home/pic_pro',{
                      'page':1,
                     'categoryId':categoryId,
                     'pagesize':this.pagesize

             }).then(res=>{
             let data=res.data.data
             if(!data.data.length){
               this.choosse=this.choosse+1
             }
             this.product=data.data 
             this.totalnum=data.total

                  
         })
    },
    size(val){
      this.pagesize=val
    },
    choose(){
      this.choosse=this.choosse+1
    },
    

  }

};
</script>
